<template>
    <div class="tree-select">
        <ul v-for="(item, index) in treeData" style="margin-left: 32px;margin-bottom: 16px;" :key="index">
            <span :class="{arrowTransform: item.expanded, arrow: true}"
                @click="handleExpand(item)"
                v-show="item.children.length">&gt;</span>
            <span v-if="item.roleSelect" @click="handleCheck(item)" class="select-icon">☑</span>
            <span v-else @click="handleCheck(item)" class="select-icon">☐</span>
            <span class="name" :class="{selected: item.selected}" :tid="item.id" @click="handleSelect(item)">{{item.name}}</span>
            <selectTree
                v-show="item.expanded"
                :tree-data="item.children">
            </selectTree>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        treeData:{
            type:Array,
            default:function(){
                return []
            }
        },
        flatTree:{

        }
    },
    data() {
        return {

        }
    },
        methods: {
            //展开或收起
            handleExpand(item) {
                item.expand();
            },
            //节点选中
            handleSelect(item) {
                console.log(item)
                // this.$emit('selectTreeDatas',item)
                item.select(item);
                 this.$store.commit('SELECT_TREE',item)
                  if (Object.keys(this.$parent.$listeners).length == 0) {
                this.$emit('selectTreeDatas',item)

            } else {
                this.$parent.$listeners.selectTreeDatas(item);

            }
            },
            //节点勾选
            handleCheck(item) {
                console.log(item)
                
                item.check();

            },
            //判断当前勾选节点的父节点是否需要勾选
            // updateTreeUp(nodeKey) {
            //     console.log(nodeKey)
            //     console.log(this.flatTree[nodeKey])
            //     var parentKey = this.flatTree[nodeKey].parent;
            //     var childrenKey = "pageChildren";
            //     if (typeof parentKey == 'undefined') return;

            //     var node = this.flatTree[nodeKey].node;
            //     var parent = this.flatTree[parentKey].node; 
            //     console.log(node)
            //     console.log(parent) 
            //     if (node.checked == parent.checked) return;

            //     if (node.checked == true) {
            //         this.$set(parent, 'checked', parent[childrenKey].every(function (node) {
            //             return node.checked;
            //         }));
            //     } else { 
            //         this.$set(parent, 'checked', false);
            //     }
            //     console.log(parentKey)
            //     this.updateTreeUp(parentKey);
            // },
            // //判断当前勾选节点的子节点是否勾选
            // updateTreeDown(node) {
            //     var changes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
            //     var childrenKey = "children";

            //     for (var key in changes) {
            //         this.$set(node, key, changes[key]);
            //     }
            //     if (node[childrenKey]) {
            //         node[childrenKey].forEach(function (child) {
            //             this.updateTreeDown(child, changes);
            //         }.bind(this));
            //     }
            // },
            // //获取已勾选节点
            // getCheckedNodes() {
            //     var arr = this.flatTree.filter(item => {
            //         return item.node.checked;
            //     }).map(item => {
            //         return item.node;
            //     });
            //     console.log(arr)
            // },
            // //获取已选中节点
            // getSelectNodes() {
            //     var arr = this.flatTree.filter(item => {
            //         return item.node.selected;
            //     }).map(item => {
            //         return item.node;
            //     });
            //     console.log(arr)
            // }
        }
}
</script>>
<style scoped>
        li{
            list-style: none;
            padding: 10px;
        }
        .arrow{
            cursor: pointer;
            display: inline-block;
            transition: transform .3s;
            margin-right: 5px;
        }
        .arrowTransform{
            transform: rotate(90deg);
        }
        .selected{
            background: #2b85e4;
        }
        .select-icon {
            margin-right: 5px;
            cursor: pointer;
        }
        .name {
            cursor: pointer;
            font-size: 12px;
            color: #666;
        }
</style>